<?php include "../public/header.php";?>
<?php include "../public/header_edit.php";?>
<body>
<style>
    input{border-color: #ccc !important;}
</style>
<form class="layui-form layui-form-pane" id="operatePage">
    <div class="page-title"><div class="page-title-con">
            <span>导入</span>
            <div class="page-title-opt-list">
                <a id="down_temp" class="layui-hide" href="javascript:;">
                    <button type="button" class="layui-btn layui-btn-sm btn-light marginr5">下载模板</button>
                </a>
                <button type="button" class="layui-btn layui-btn-sm btn-dark marginr5" lay-submit="" lay-filter="add">提交</button>
                <span id="page-close" class="page-close" onclick="layer_close()">×</span>
            </div>
        </div>
    </div>
    <div class="main-container">
        <div class="layui-form-item">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md12">
                    <label class="layui-form-label"><text>*</text>选择Excel</label>
                    <div class="layui-input-block">
                        <input type="file" id="hideFileInput" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" style="display: none">
                        <input type="text" id="hideFile" name="hideFile" placeholder="请选择" readonly  autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md12">
                    <label class="layui-form-label"><text>*</text>选择Sheet</label>
                    <div class="layui-input-block">
                        <select id="sheet" name="sheet" lay-filter="sheet" >
                            <option value="">请选择</option>
                        </select>
                        <p class="error" id="sheet_error" style="margin: 0;"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md12">
                    <label class="layui-form-label"><text>*</text>数据开始行</label>
                    <div class="layui-input-block">
                        <select name="start" lay-filter="start" >
                            <option value="1">1</option>
                            <option value="2" selected>2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-hide" id="daoleiDiv">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md12">
                    <label class="layui-form-label"><text>*</text>导入方式</label>
                    <div class="layui-input-block">
                        <div class="radio-block">
                            <input type="radio" name="type" lay-filter="type" checked value="add" title="新增">
                            <input type="radio" name="type" lay-filter="type" value="edit" title="更新">
                            <input type="radio" name="type" lay-filter="type" value="save" title="新增并更新">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item height_auto">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md12">
                    <label class="layui-form-label label_textarea">导入说明</label>
                    <div class="layui-input-block">
                        <div style="border: 1px solid #ccc;padding: 5px 10px">
                            <p>1、导入前，可参照模板整理excel表格或直接采用现有的表格；</p>
                            <p>2、excel表格中请不要有合并单元格等特殊格式；</p>
                            <p>3、红星标识的为必填字段，因此在您的表格中必须包括；</p>
                            <p>4、日期格式应为：yyyy-mm-dd，月份格式应为yyyy-mm；</p>
                            <p>5、地区格式为：省/市/区 或 省/市 或 省；</p>
                            <p>6、公司或部门，按最后一级的名称填入；</p>
                            <p>7、涉及到表单内容是选择填入内容的，应与系统中的选项一致；</p>
                            <p>8、更多导入注意事项请参看导入模板。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<script>
    var param_url = getQueryVariable('url') || '';

    //reveal参数   默认通用导入页面    如自定义  传值规则【目录@页面 如：public@importdata】
    var param_reveal = getQueryVariable('reveal') || 'public@importdata';
    var revealarr = param_reveal.split("@");
    revealPage = '../'+revealarr[0]+'/'+revealarr[1]+'.php';

    var param_down = getQueryVariable('down') || '';
    $("#down_temp").removeClass('layui-hide').attr('href', '/static/down/数据导入模板.zip');

    var param_daolei = getQueryVariable('daolei') || 0;
    if(param_daolei > 0){
        $("#daoleiDiv").removeClass('layui-hide');
    }


    $("#operatePage").validate({
        rules: {
            hideFile: {required: true},
        },
        messages:{
            hideFile: {required: "请选择"},
        }
    });
    layui.use(['laytp', 'form'], function() {
        var form = layui.form, layer = layui.layer;

        $("#hideFile").click(function () {
            $("#hideFileInput").click();
        });


        $("#hideFileInput").change(function () {
            var loading = layui.layer.load(0, {shade: 0.1});
            let fd = new FormData();
            fd.append('file', this.files[0]);
            fd.append('token', facade.getCookie('token'));
            $.ajax({
                url: server_api_name+ask_upload_import,
                type: "POST",
                data: fd,
                contentType: false,
                processData: false,
                dataType: "json",
                success: function (res) {
                    layui.layer.close(loading);
                    if (res.code === 2000) {
                        $("#hideFile").val(res.data.name);
                        var sheet = res.data.sheet;
                        var str = '<option value="">请选择</option>';
                        for (var key in sheet){
                            str += '<option value="'+key+'">'+sheet[key]+'</option>';
                        }
                        $('#sheet').html(str);
                        $("#operatePage").valid();
                        render_from();
                    }
                },
                error: function (res) {
                    layui.layer.close(loading);
                    facade.error("网络错误");
                },
            })
        });


        form.on('select(sheet)', function(data){
            if(!data.value){
                $('#sheet_error').show().text('请选择');
                $('#sheet_error').parent().find('input').addClass('select_error');
            }else{
                $('#sheet_error').hide();
                $('#sheet_error').parent().find('input').removeClass('select_error');
            }
        });

        form.on('submit(add)', function(data){
            var validRes = $("#operatePage").valid();
            if(data.field.sheet == ''){
                $('#sheet_error').show().text('请选择');
                $('#sheet_error').parent().find('input').addClass('select_error');
                validRes = false;
            }else{
                $('#sheet_error').hide();
                $('#sheet_error').parent().find('input').removeClass('select_error');
            }
            if(!validRes){return false;}

            var curIndex = parent.layer.getFrameIndex(window.name);
            setTimeout(function () {
                parent.layer.close(curIndex);
            },1000)

            var post_sheet = data.field.sheet;
            var post_start = data.field.start;
            var post_type = data.field.type;

            parent.layer.open({
                title: false
                ,skin: 'operate-layer'
                ,type: 2
                ,content: revealPage+'?url='+param_url+'&sheet='+post_sheet+'&start='+post_start+'&type='+post_type
                ,area: ['100%', '100%']
                ,closeBtn: 0
                ,move: '.move_title'
                ,moveOut: true
            });
        });
    });



</script>
</body>
</html>
